<template>
  <div class="box">
    <!--导航栏-->
    <!-- 中间模块 -->
    <el-menu
        :default-active="activeIndex2"
        class="el-menu-demo"
        mode="horizontal"
        @select="handleSelect"
        background-color="#545c64"
        text-color="#fff"
        margin="0 20px"
        active-text-color="#ffd04b">
      <el-menu-item index="1"  @click="$router.push('/indexes')" > <i class="el-icon-s-home"></i>首页</el-menu-item>
      <el-menu-item index="0"><i class="el-icon-s-custom"></i>驾校教练</el-menu-item>
      <el-menu-item index="2"><i class="el-icon-s-check"></i>汽车陪练</el-menu-item>
      <el-menu-item index="3"><i class="el-icon-position"></i>学车指南</el-menu-item>
      <el-menu-item index="4"><a href="https://www.autohome.com.cn/beijing/"><i class="el-icon-shopping-cart-full"></i>汽车之家</a></el-menu-item>
      <el-menu-item index="5"  @click="$router.push('/enroll')" > <i class="el-icon-s-home"></i>网上报名</el-menu-item>
      <el-button type="primary" icon="el-icon-user-solid"  plain>个人中心</el-button>
      <el-button type="danger"  @click="$router.push('/login')"  plain>退出登录</el-button>
    </el-menu>

<!--    轮播图-->
    <el-carousel :interval="5000" arrow="always">
      <el-carousel-item v-for="item in list" :key="item">
        <img :src="item.src" style="width: 100%;height: 600px">
      </el-carousel-item>
    </el-carousel>



    <el-card class="card">
      <el-tabs :tab-position="tabPosition" style="height: 500px;">
        <el-tab-pane label=" 驾校简介">
          <el-col :span="100">
            <el-card shadow="hover">
              驾校简介 <br>
              <div style="font-size: 0.8em;color: black">
                &nbsp; &nbsp;
                椰丝驾校总部座落在风景迷人的西南石油大学校内，紧邻滨江大道，市内及效外都设有招生办公室及训练场，于2008年经省市交通部门批准，市工商局注册成立。经过几年的建设和发展，现以初具规模，深得各级领导和全体广大师生的好评，建成后的****是国家二类汽车驾校，师资力量雄厚，学校设备、设施齐全，从2005年以来通过不断的整改，现有东风、捷达、桑塔、羚羊、中兴等各车辆50余台，训练场地20000平方米，办公场地700多平方米，学员宿舍舒适，免费住宿，市内学员免费接送，学校收费合理，教学，管理正规、培训合格率高，有专职教练员50余人，管理人员数人，其中高、中专以上学历数人,理论操作人才多人，专用办公室5间，微机室5间,电脑20余台，摸拟机10台，所有档案微机管理，软件保存。
                <br> &nbsp; &nbsp; 在去年学校软硬件已通过省级主管部门再次验收合格,并评为省级AA级驾校。
                我校以打造精品驾校为目标，以高起点、高标准、高品质为宗旨，统-按全国教学大纲要求严格施教，为学员在校的正规化学习,奠定了坚实基础，学校同时开设了白班、夜班、周末班，代办从业资格证等,努力地为社会输送了大批的优秀驾驶人才,学校始终坚持团结、务实、开拓、创新的发展观点，以让学员满意，是我们永远追求的目标，为构建和谐社会，文明驾驶而努力!

                <img style="height: 100px;width: 100px" src="../assets/dt.gif">
              </div>


            </el-card>
          </el-col>


        </el-tab-pane>
        <!--      <el-tab-pane label="关于我们" >关于我们 <br> <div >11111</div> </el-tab-pane>-->
        <el-tab-pane label="联系方式">联系方式 <br>
          <div style="font-size: 0.8em;color: black">

            <div v-for="item in contact" :key="item" class="text item"
                 style="width: 600px;text-align: left;margin-left: 20px;line-height: 30px;">
              {{ item.msg }}
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="服务承诺">服务承诺 <br>
          <div style="font-size: 0.8em;color: black">
            <div v-for="item in content" :key="item" class="text item"
                 style="width: 600px;text-align: left;margin-left: 20px;line-height: 30px;">
              {{ item.msg }}
            </div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="图片展示">图片展示 <br>
          <div style="font-size: 0.8em;color: black;">
            <div class="tu">
              <img style="width: 300px;height: 180px;" src="../assets/shinei.webp">
              全市最大的训练基地
            </div>
            <div class="tu">
              <img style="width: 300px;height: 180px;" src="../assets/yijiao.jpg">
              练车训练场一角

            </div>
            <br>
            <div class="tu">
              <img style="width: 300px;height: 180px;" src="../assets/xunlc.jpg">
              宽敞的训练基地
            </div>
            <div class="tu"><img style="width: 300px;height: 180px;" src="../assets/weiji.jpg">
              微机理论模拟测试
            </div>

          </div>
        </el-tab-pane>
        <!--        收费表-->
        <el-tab-pane label="收费标准">收费标准 <br>
          <div>

            <el-table
                :data="tableData"
                border
                style="width: 100%">
              <el-table-column
                  fixed
                  prop="id"
                  label="编号">
              </el-table-column>
              <el-table-column
                  prop="type"
                  label="学车类型">
              </el-table-column>
              <el-table-column
                  prop=" vehicle"
                  label="车辆分配">
              </el-table-column>
              <el-table-column
                  prop="time"
                  label="拿证时间">
              </el-table-column>
              <el-table-column
                  prop="takes"
                  label="接送方式">
              </el-table-column>
              <el-table-column
                  prop="cost"
                  label="费用">
              </el-table-column>
              <el-table-column
                  fixed="right"
                  label="操作"
                  width="100">
                <template slot-scope="scope">
                  <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                  <el-button type="text" size="small">编辑</el-button>
                </template>
              </el-table-column>
            </el-table>


          </div>


        </el-tab-pane>

      </el-tabs>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "indexes",
  data() {
    return {
      tabPosition: 'left',
      activeName: 'second',
      activeIndex: '1',
      activeIndex2: '1',



      /*价格表*/
      tableData: [],
      //轮播图
      list:[
        {src:require('@/assets/xc1.jpg')},
        {src:require('@/assets/xc2.jpg')},
        {src:require('@/assets/xc3.jpg')},
        {src:require('@/assets/xc4.jpg')},
        {src:require('@/assets/xc5.jpg')},
      ],
      //服务承诺内容
      content: [
        {msg: '1、一站式收费，确保学员一次性交足费用后，中途不再收取其他任何费用。'},
        {msg: '2、确保培训合格拿照，学员考试如未通过，可免费继续学习直到考试合格为止。'},
        {msg: '3、室内训练、昼夜练车，风雨无阻，随到随学，每辆教练车学员人数不超过6名，提供微机理论及红外线桩考模拟测试。'},
        {msg: '4、外地学员在本校办理驾照后，免费为学员办理驾照迁回原籍手续。'},
        {msg: '5、市内学员免费专车接送。'},
        {msg: '6、文明教学不使用粗俗侮辱性语言对待学员。'},
        {msg: '7、不接受学员任何礼物以及请吃和馈赠。'},
        {msg: '8、驾校倡导""信誉第一，服务至上"的宗旨，只要您提出的要求合理，我们将竭力为您服务。一站式收费，'},
      ],

      //联系方式内容
      contact: [
        {msg: '地址：南宁市经济开发区麦园天高园内。'},
        {msg: '电话：0791-3898181、3898811、389889'},
        {msg: '信箱：yesi_0426@163.com。'},
        {msg: '网址：www.81JX.CN'},
        {msg: '业务QQ：104721740'},

      ],

    }
  },
  created() {
    this.$axios.get('/api/price/info').then(res=>{
      console.log(res);
      this.tableData = res.data.data;
    })
  },

  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClick(row) {
      console.log(row);
    }
  }

}
</script>

<style scoped>


.box {
  width: 1000px;
  margin: 0 auto;

}

.card {
  font-size: 1.5em;
  /*height: 600px;*/
}

.top span {
  margin-left: 20px;
  font-size: 1.2em;
  color: white;
  margin: 0px 50px;
}

.top {
  line-height: 50px;

}

.top span:hover {

  color: #ff3f1d;
}

.el-tab-pane {
  color: #00aeff;
}

.tu {
  /*border: 1px red solid;*/
  width: 300px;
  height: 220px;
  display: inline-block;
  margin: 10px 10px;
}

.baom {
  color: white;
  background-color: #f33920;
  font-size: 1.5em;
  margin-top: 100px;
  box-shadow: #282724 0 5px 15px 5px;
  border-radius: 20px;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;

}

</style>